<template>
  <el-dialog width="600px" :visible.sync="isShow" :show-close="false" class="register">
    <div class="title" slot="title">用户注册</div>
    <el-form :model="form" label-width="90px">
      <el-form-item label="头像" class="upload-img">
        <el-upload
          class="avatar-uploader"
          :action="baseUrl+'/uploads'"
          name="image"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="imageUrl" :src="baseUrl + '/'+imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary">确定</el-button>
      <el-button type="primary" @click="isShow= false">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      form:{},
      isShow: false,
      baseUrl:process.env.VUE_APP_URL,
      imageUrl:''
    };
  },
  methods: {
       handleAvatarSuccess(res, file) {
            //   res:上传接口调用成功后的返回值
            //  filep它是element帮我们封装的一个参数
            window.console.log(res, file);
            this.imageUrl = res.data.file_path;
            // this.imageUrl = URL.createObjectURL(file.raw); //将file文件转换成了一个blob文件地址
          },
          beforeAvatarUpload(file) {
            window.console.log(file);
            const isJPG =
              file.type === "image/jpeg" || file.type === "image/png";
            const isLt2M = file.size / 1024 / 1024 < 2;
            //   file.size:字节
            if (!isJPG) {
              this.$message.error("上传头像图片只能是 JPG ,PNG 格式!");
            }
            if (!isLt2M) {
              this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
          },
  },
};
</script>

<style lang="less">
.register {
  .el-dialog__header {
    padding: 0;
  }
  .title {
    text-align: center;
    color: #fff;
    height: 53px;
    line-height: 53px;
    font-size: 17px;
    font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
    font-weight: 400;
    background: linear-gradient(to right, #02c4fa, #1394fa);
    letter-spacing: 0px;
  }
  .footer {
    text-align: center;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .upload-img{
      text-align: center;
  }
}
</style>